<template>
  <div class="grading-container">
    <!-- 搜索区域 -->
    <div class="search" v-if="isShowSearch">
      <span>试卷名称</span>
      <el-input v-model="examName" placeholder="请输入试卷名称" />
      <el-button :icon="Search" class="el-button__primary" type="primary" @click="initPageGrading">查询</el-button>
      <el-button :icon="Refresh" class="el-button__default" @click="refresh()">重置</el-button>
    </div>
    <!-- 批改列表 -->
    <div class="grading-list__card">
      <el-row :gutter="30" v-loading="loading">
        <!-- 循环 gradingList 创建 el-card -->
        <el-col :lg="6" :md="6" :sm="12" :xs="24" v-for="item in gradingList" :key="item.id">
          <el-card class="grading-list__card__item">
            <div class="grading-list__card__item__title">
              <el-tooltip :content="item.examName" placement="top" v-if="item.examName.length > 15">
                <span class="ellipsis">{{ item.examName.substring(0,15)+'...'}}</span>
              </el-tooltip>
              <span v-else>{{ item.examName }}</span>
            </div>
            <div class="grading-list__card__item__other">
              <div class="grading-list__card__item__other__item">
                <span>考试描述： </span>
                <el-tooltip :content="item.examDescription" placement="top" v-if="item.examDescription.length > 20">
                  <span class="ellipsis">{{ item.examDescription.substring(0,15)+"..." }}</span>
                </el-tooltip>
                <span v-else>{{ item.examDescription }}</span>
              </div>
              <div class="grading-list__card__item__other__item">
                <span>考试时间： </span>
                <span>{{ item.startTime }}</span>
              </div>
              <div class="grading-list__card__item__other__item">
                <span>待批改数量： </span>
                <span style="color:rgb(252, 86, 49);">{{ item.correctNum }}</span>
              </div>
              <div class="grading-list__card__item__other__item">
                <span>已批改数量： </span>
                <span style="color: #67c23a">{{ item.correctedNum }}</span>
              </div>
              <div class="grading-list__card__item__other__item">
                <span>状态： </span>
                <span style="color: #535bf2">{{ item.status === 6 ? "待阅卷" : "阅卷中" }}</span>
              </div>
              <!-- 操作 -->
              <div class="grading-list__card__item__operator">
                <el-button link :icon="Edit" @click="goToGrading(item.id)" :disabled="!item.status===7"> 去阅卷</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 分页按钮 -->
    <div class="pagination">
      <div class="pagination-block">
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[12, 24, 48, 96]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
        />
      </div>
    </div>
    <correct-page @refresh="refresh"/>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {Edit, Refresh, Search} from "@element-plus/icons-vue";
import {correctStore} from "@/stores/exam/correctStore.js";
import CorrectPage from "@/components/corrent/correctPage.vue";
import {getCorrectExamList} from "@/api/question/exam.js";
// 数据定义
const isShowSearch = ref(true);
const examName = ref("");
const loading = ref(false);
const currentPage = ref(1);
const pageSize = ref(12);
const total = ref(0);
const store=correctStore()
// 模拟的在线批改列表数据
const gradingList = ref([
]);

onMounted(()=>{
  initPageGrading()
})
// 初始化分页数据
const initPageGrading = async () => {
  loading.value = true;
  // 模拟异步请求
  const res = await getCorrectExamList(currentPage.value, pageSize.value, examName.value)
  gradingList.value=res.data.records
  total.value=res.data.total
  loading.value=false
};

// 刷新页面
const refresh = () => {
  examName.value = "";
  initPageGrading();
};

// 显示/隐藏搜索框
const showSearch = () => {
  isShowSearch.value = !isShowSearch.value;
};

// 去阅卷
const goToGrading = (id) => {
  console.log("去阅卷，试卷ID：", id);
  // 跳转到阅卷页面逻辑
  store.correctOpen=true
  store.examId=(id)
};

// 分页事件处理
const handleCurrentChange = (val) => {
  currentPage.value = val;
  initPageGrading();
};

const handleSizeChange = (val) => {
  pageSize.value = val;
  initPageGrading();
};
</script>

<style scoped>
.grading-container {
  border: 1px solid var(--el-menu-border-color);
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.grading-list__card {
  min-height: 70%;
  display: flex;
  overflow: auto;
  margin: 0 25px;

  .el-row {
    width: 100% !important;
    height: 100% !important;
  }

  .grading-list__card__item {
    border-radius: 10px;
    margin: 20px;
    border: rgb(46, 92, 246) 1px solid;
    box-shadow: 1px 1px 10px 1px rgb(46, 92, 246, 0.2);
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
  }
}

.pagination {
  width: 100%;
  height: 10%;
  margin: 20px;
  display: flex;
  justify-content: right;

  .pagination-block {
    margin-right: 20px;
  }
}

.operation {
  width: 100%;
  height: 10%;
  justify-content: space-between;
  text-align: center;
  align-items: center;
  display: flex;

  .float_left {
    align-items: center;
    display: flex;
  }

  .float_right {
    align-items: center;
    display: flex;
    margin-right: 20px;
  }
}
.search {
  span {
    line-height: 32px;
  }

  display: flex;
  font-size: 12px;

  .el-input {
    width: 160px;
    height: 32px;
    font-size: 12px;
    margin: 0 8px;
  }
}

.grading-list__card__item__title {
  text-align: center;
  color: rgb(46, 92, 246);
  font-size: 14px;
  margin-bottom: 10px;
}

.grading-list__card__item__other {
  font-size: 12px;

  .grading-list__card__item__other__item {
    margin: 5px 0;
  }
}

.grading-list__card__item__operator {
  font-size: 12px;
  display: flex;
  justify-content: right;

  .el-button {
    color: rgb(46, 92, 246);
    font-size: 12px;
  }
}


</style>